<template>
  <div class="fourW">
    <div class="tags">
      <van-tag v-if="show" closeable size="medium" type="primary" @close="close">
        价格4万以下
      </van-tag>
    </div>
    <van-list
    v-model="loading"
    finished-text="没有更多了"
    @load="onLoad"
    >
      <van-card
        v-for="prod in postList"
        :key="prod.id"
        :title="prod.title"
        :thumb="prod.thumb_img"
      >
        <template #desc>
          <p class="des">
            <span v-html="prod.license_date"></span> |
            <i
              class="iconfont"
              v-html="prod.road_haul"
              style="font-size: 12px"
            ></i>
          </p>
        </template>
        <template #price>
          <p class="prc">
            <i class="iconfont" v-html="prod.price"></i>
          </p>
        </template>
        <template #num>
          <img
            src="https://sta.guazistatic.com/guazi-mall-second/img/like-normal-empty.f3166e1.png"
            style="width: 20px; height: 20px"
          />
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script>
import { getFourW } from '@/api/home'
export default {
  name: 'fourW',
  data() {
    return {
      list: [],
      loading: true,
      finished: false,
      postList: [],
      products: [],
      page: 1,
      show: true,
    }
  },
  async created() {
    try {
      const [{ postList, page }] = await Promise.all([getFourW()])
      this.page = page
      this.postList = postList
      this.loading = false
    } catch (error) {
      console.error('有错误：', error)
    }
  },
  methods: {
    close() {
      this.show = false
    },
    async onLoad() {
      const { postList } = await getFourW(this.page)
      this.postList = [
        ...this.postList,
        ...postList,
      ]
      this.page += 1
      this.loading = false
    },
  },
}
</script>

<style lang="scss" scoped>
  .tags{
    width: 100%;
    height: 60px;
    padding: 28px 60px;
    display: flex;
    align-items: center;
  }
  ::v-deep .van-tag--medium{
    height: 24px;
    background: #f5f7fa;
    color: #000;
  }
  ::v-deep .van-card__thumb {
    width: 160px;
    height: 100px;
  }
  ::v-deep .van-card__title {
    min-height: 40px;
    font-weight: 400;
    line-height: 20px;
    font-size: 16px;
  }
  .des {
    margin-top: -1px;
    color: #8f96a0;
  }
  .prc {
    margin-top: -3px;
    color: #ff7147;
    .iconfont:nth-child(1) {
      font-weight: 600;
    }
    .iconfont:nth-child(2) {
      font-weight: normal;
      font-size: 12px;
    }
  }
</style>
